<template>
    <div>
                <div style="display: flex;align-items: center;margin-top:30px;margin-left: 60px;">
                <img src="../../../static/线条 1@1x.png" alt="">
                <span style="margin-left: 10px; font-size: 30px; color: #415058; font-weight: bold;">视线跟随</span>
            </div>
            <div class="eyesightchart" id="eyesight"></div>
</div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    var chartDom = document.getElementById('eyesight');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      xAxis: {
        type: 'category',
        data: ['黑板', '教室', '书本', '电子产品', '其他'],
        axisLine: {
          lineStyle: {
            color: '#666',
          },
        },
        axisLabel: {
          textStyle: {
            color: '#666', // Change x-axis label color
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#666',
          },
        },
        axisLabel: {
          textStyle: {
            color: '#666', // Change y-axis label color
          },
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      series: [
        {
          data: [120, 200, 150, 80, 70],
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ff7e5f' },
              { offset: 1, color: '#feb47b' },
            ]),
          },
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>





<style>
  .eyesightchart {
    width: 400px;
    height: 300px;
    margin-left: 90px;
    margin-top: 0px;
  }
</style>